<template>
	<view class="content">
		<health-title @timeBack="timeBack" :borderBottom="false" height="100" Title="压力" :showWeek="false"></health-title>
		<view class="">
			<view class="chart-box">
				<view class="title _df" v-if="!isEmpty">
					<view class="num">
						{{topData.value}}
					</view>
					<view class="dw" v-if="dateType == '日'">
						{{topData.status}}
						<!-- 轻度压力 -->
					</view>
					<view class="time" v-if="dateType == '日'">
						{{topData.createTime}}
					</view>
				</view>
				
				<view ref="chart" id="chart" class="chart">
					<view class="img" v-if="isEmpty">
						<image src="@/static/img/index/echart.png" mode=""></image>
						<view class="txt">
							暂无数据
						</view>
					</view>
					<l-echart ref="chartRef"></l-echart>
				</view>
				<view class="tip-box _df _jc">
					<view class="item _df _ac _jc" v-for="(item,index) in tipList" :key="index">
						<image class="icon" v-if="item.valueData == '4'" src="@/static/img/index/ylIcon1.png" mode=""></image>
						<image class="icon" v-else-if="item.valueData == '3'" src="@/static/img/index/ylIcon2.png" mode=""></image>
						<image class="icon" v-else-if="item.valueData == '2'" src="@/static/img/index/ylIcon3.png" mode=""></image>
						<image class="icon" v-else-if="item.valueData == '1'" src="@/static/img/index/ylIcon4.png" mode=""></image>
						<view class="text">
							{{item.name}}
						</view>
						<view class="info">
							{{item.jsonValue.a +'-'+ item.jsonValue.b}}
						</view>
					</view>
				</view>
			</view>
			<view class="box2">
				<view class="title _df _ac">
					<image src="@/static/img/index/tIcon4.png" mode=""></image>
					{{glTitle}}
				</view>
				<view class="list">
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{infoData.min}}
							</view>
							<view class="dw">
								
							</view>
						</view>
						<view class="info">
							最小压力
						</view>
					</view>
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{infoData.max}}
							</view>
							<view class="dw">
								
							</view>
						</view>
						<view class="info">
							最大压力
						</view>
					</view>
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{infoData.avg}}
							</view>
							<view class="dw">
								
							</view>
						</view>
						<view class="info">
							平均压力
						</view>
					</view>
				</view>
			</view>
			<view class="box2">
				<view class="title _df _ac">
					<image src="@/static/img/index/tIcon5.png" mode=""></image>
					压力分布
				</view>
				<view class="con _df _jb _ac">
					<view class="jdt1" :style="{width:width1}">
						
					</view>
					<view class="jdt2" :style="{width:width2}">
						
					</view>
					<view class="jdt3" :style="{width:width3}">
						
					</view>
					<view class="jdt4" :style="{width:width4}">
						
					</view>
				</view>
				<view class="list">
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{fbData.severe}}
							</view>
							<view class="dw">
								次
							</view>
						</view>
						<view class="info2">
							<image src="@/static/img/index/ylIcon1.png" mode=""></image>
							重度压力{{width1}}
						</view>
					</view>
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{fbData.moderate}}
							</view>
							<view class="dw">
								次
							</view>
						</view>
						<view class="info2">
							<image src="@/static/img/index/ylIcon2.png" mode=""></image>
							中度压力{{width2}}
						</view>
					</view>
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{fbData.light}}
							</view>
							<view class="dw">
								次
							</view>
						</view>
						<view class="info2">
							<image src="@/static/img/index/ylIcon3.png" mode=""></image>
							轻度{{width3}}
						</view>
					</view>
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{fbData.relax}}
							</view>
							<view class="dw">
								次
							</view>
						</view>
						<view class="info2">
							<image src="@/static/img/index/ylIcon4.png" mode=""></image>
							放松{{width4}}
						</view>
					</view>
				</view>
			</view>
			<view class="box3 _df _jb _ac" @click="toView">
				<view class="">
					了解压力
				</view>
				<u-icon name="arrow-right" color="#888" size="28"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from "moment";
	
	export default {
		data() {
			return {
				myChart:null,
				chartInstance: null,
				option: {},
				high:0.5,
				low:0.5,
				page:{
					begin: "",
					end: ""
				},
				xData:[],
				yData:[],
				yData2:[],
				format:'HH:mm',
				dateType:'日',
				infoData:{},
				topData:{},
				fbData:{},
				sum:0,
				min:0,
				max:0,
				glTitle:'今日概览',
				isEmpty:true,
				chartData:{},
				tipList:[]
			}	
		},
		watch:{
			isEmpty(v){
				this.isEmpty = v
			}
		},
		computed:{
			width1(){
				let width = 0
				if(this.fbData.severe){
					width = (this.fbData.severe / this.sum * 100).toFixed(0)
				}else{
					width = 0
				}
				return width+'%'
			},
			width2(){
				let width = 0
				if(this.fbData.moderate){
					width = (this.fbData.moderate / this.sum * 100).toFixed(0)
				}else{
					width = 0
				}
				return width+'%'
			},
			width3(){
				let width = 0
				if(this.fbData.light){
					width = (this.fbData.light / this.sum * 100).toFixed(0)
				}else{
					width = 0
				}
				return width+'%'
			},
			width4(){
				let width = 0
				if(this.fbData.relax){
					width = (this.fbData.relax / this.sum * 100).toFixed(0)
				}else{
					width = 0
				}
				return width+'%'
			},
		},
		created() {
			
			
		},
		mounted() {
			// this.initChart();
		},
		onReady() {
			// this.initChart();
		},
		onLoad() {
			// this.$nextTick(()=>{
			// 	this.initChart2();
			// })
			
		},
		onShow() {
			
		},
		
		methods: {
			getData(){
				let that = this
				this.chartData = {}
				uni.$_post({
					url: "getPressure",
					that: that,
					params: that.page,
					success(res) {
						if(res.code == 0){
							// console.log(res)
							that.chartData = res.data.one;
							if(res.data.topData.createTime){
								res.data.topData.createTime = uni.$_momentTime(res.data.topData.createTime,'HH:mm')
							}
							if(that.dateType != '日'){
								res.data.topData.value = res.data.two.min + '-' +res.data.two.max
							}
							that.topData = res.data.topData;
							if(res.data.two){
								that.infoData = res.data.two;
							}
							if(res.data.three){
								that.fbData = res.data.three;
								that.sum = that.fbData.light + that.fbData.moderate +that.fbData.relax+that.fbData.severe
							}
							if(res.data.pressureIndex){
								that.tipList = res.data.pressureIndex;
							}
							if(that.dateType == '日'){
								if(that.chartData.dataList[0]){
									that.min = uni.$_momentTime(that.chartData.dataList[0][0])
								}
								that.max = uni.$_momentTime(that.page.begin,'YYYY-MM-DD 23:59:59')
							}else{
								that.min = uni.$_momentTime(that.page.begin,'YYYY-MM-DD HH:mm:ss')
								that.max = uni.$_momentTime(that.page.end,'YYYY-MM-DD HH:mm:ss')
							}
							that.initChart(that.chartData);
							
						}else{
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			toView(){
				uni.navigateTo({
					url:'/pages/comA/details?title=了解压力' + '&type=3699'
				})
			},
			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(this.$echarts);
				// this.initChart()
				chart.setOption(this.option)
			},
			timeBack(e) {
				// console.log(e, 666)
				if(e.dateTxt == '周'){
					this.format = 'MM-DD'
					this.glTitle = '本周概览'
				}else if(e.dateTxt == '月'){
					this.format = 'MM-DD'
					this.glTitle = '本月概览'
				}else{
					this.format = 'HH:mm'
					this.glTitle = '今日概览'
				}
				this.dateType = e.dateTxt
				this.page.begin = e.sTime
				this.page.end = e.eTime
				
				
				this.getData()
			},
			formatter(value, index) {
				// 如果时间是 23:59:59 , 格式化为 24:00
				if (value === new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')).getTime()) {
				  return moment(value).format("24:00");
				} else {
				  // 其他的时间返回格式化 00:00
				  return moment(value).format("HH:mm");
				}
			},
			initChart(chartData) {
				let dataZoom = []
				if(!chartData.dataList || chartData.dataList.length==0) {
					this.isEmpty = true
					this.$refs.chartRef.clear()
					// return
					dataZoom = []
				}else{
					this.isEmpty = false
					if(this.dateType != '周'){
						dataZoom = [
						    {
						      type: 'inside',
						      start: 0,
						      end: 55,
							  show :false
						    },
						    {
						      start: 0,
						      end: 50,
							  show :false
						    },
							
						  ]
					}
				}
				let that = this
				let yData = chartData.dataList
				this.option = {
					grid: {
						left: '8%',
						right: '1%',
						bottom: '4%',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						triggerOn:'click',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
							label:{
								show: false,
							}
						},
						confine: true,
						formatter: function (params) {
							// params 是一个数组，数组中包含每个系列的数据信息
							let result = '';//收缩压信息窗结果
							let arr = []//总数组
							arr = params
							// console.log(arr,999)
							let valArr = []//收缩压数组
							let newArr = []//收缩压时间相同数组
							let name = ''//时间
							let marker = ''
							let seriesName = ''
							arr.forEach(function (item) {
								// item 是每一个系列的数据
								seriesName = item.seriesName; // 系列名称
								marker = item.marker; // 系列名称
								 // 数据值
								 let value = ''
								if(that.dateType != '日'){
									value = item.value[0].split(' ')[0];
									name = item.value[0].slice(0,10)
								}else{
									value = item.value[0];
									name = item.value[0]
								}
								const value2 = item.value[1] // 数据值
								
								let obj = {
									time:value,
									val:value2
								}
								valArr.push(obj)
								 // 标志图形
								// console.log(value,633)
								result += `${item.marker}${seriesName}: ${value}   ${value2}`;
							});
							let newVal = []
							newArr = valArr.filter((item, index) => valArr.indexOf(item.time) !== index)
							newArr.map(item =>{
								newVal.push(item.val)
							})
							const max = Math.max(...newVal);
							const min = Math.min(...newVal);
							// console.log(valArr,111)
							// console.log(valArr2,222)
							// console.log(newArr,333)
							// console.log(max,'最大')
							// console.log(min,'最小')
							if(arr.length<=2){
								result = `${marker}${seriesName}: ${min}`;
							}else{
								result = `${marker}${seriesName}: ${min}-${max}`;
							}
							return name +'\n' + result;
							
							
						}
					},
					color: ['#00d9b9'],
					xAxis: {
						show:that.isEmpty?false:true,
						type: 'time',
						boundaryGap: false,
						splitLine: {     
							show: false   //隐藏x轴那条线
						},
						axisTick: {
							show: false   //隐藏x轴的刻度
						},
						axisLine: {
							show: false,
							onZero:false
						},
						// nameGap:10,
						// offset:10,
						min:that.min,
						max:that.max,
						// splitNumber: 7,
						axisLabel: {
							showMaxLabel: true,
							boundaryGap: false,
							textStyle: {
							    color: "#999",
							    fontSize: '10',
							    lineHeight: 36,
							},
						  // 格式化x轴显示
						  formatter: function(value, index) {
						  		return moment(value).format(that.format);
						  }
						},
						// data: that.xData,
						
					},
					yAxis: {
						show:that.isEmpty?false:true,
						type: 'value',
						position: 'right',
						max:that.tipList[that.tipList.length - 1].jsonValue.b,
						min:0,
						// interval:10,
						axisLabel: {
							textStyle: {
								color: "#999",
								fontSize: '12',
							},
						},
						axisLine: {
							show: false,
							lineStyle:{
								color:"#999"
							}
						},
						
					},
					dataZoom: dataZoom,
					series: [
						{
							symbolSize: 5,
							// data: yData,
							name: '压力',
							// showSymbol: false,
							data: yData,
							type: 'scatter'
						}
						
					]
				};

				this.$refs.chartRef.init(this.$echarts, chart=> {
					chart.setOption(this.option);
				});
				setTimeout(()=>{
					that.$refs.chartRef.setOption(that.option)
				},200)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx 100rpx;
		.tip-box{
			margin-bottom: 10rpx;
			margin-top: -30rpx;
			padding: 20rpx 30rpx 10rpx;
			.item{
				flex: 1;
				.icon{
					width: 30rpx;
					height: 30rpx;
				}
				.text{
					font-size: 22rpx;
					color: #333;
					font-family: $uni-font-family-Bold;
					margin: 0 5rpx;
				}
				.info{
					font-size: 22rpx;
					color: #333;
					font-family: $uni-font-family-Bold;
				}
			}
		}
		.box2{
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.08); 
			padding: 40rpx 30rpx 10rpx;
			margin-bottom: 30rpx;
			.title{
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid #eee;
				color: #171717;
				font-family: $uni-font-family-Bold;
				font-size: 28rpx;
				image{
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}
			}
			.num-box2{
				padding: 30rpx 0;
				border-bottom: 1rpx solid #eee;
				.num{
					font-size: 46rpx;
					font-family: $uni-font-family-Bold;
					color: #171717;
					margin-bottom: 15rpx;
				}
				.txt{
					font-size: 24rpx;
					font-family: $uni-font-family-Medium;
					color: #171717;
				}
				
			}
			.con{
				margin: 40rpx 0 0;
				height: 40rpx;
				border-radius: 20rpx;
				overflow: hidden;
				.jdt1{
					height: 40rpx;
					// border-radius: 20rpx 0 0 20rpx;
					background-color: #ff8905;
				}
				.jdt2{
					height: 40rpx;
					background-color: #ffbb00;
				}
				.jdt3{
					height: 40rpx;
					background-color: #a2e40b;
				}
				.jdt4{
					height: 40rpx;
					// border-radius: 0 20rpx 20rpx 0;
					background-color: #00dbc7;
				}
			}
			.info2{
				position: relative;
				font-family: $uni-font-family-Medium;
				color: #222;
				// line-height: 30rpx;
				display: flex;
				align-items: center;
				image{
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}
			}
			.list{
				padding-top: 40rpx;
				display: flex;
				flex-wrap: wrap;
				.item{
					width: 50%;
					padding-left: 50rpx;
					padding-top: 10rpx;
					box-sizing: border-box;
					margin-bottom: 50rpx;
					position: relative;
					&::before{
						display: block;
						content: '';
						width: 1rpx;
						height: 70rpx;
						background-color: #e2e2e2;
						position: absolute;
						top: 50%;
						right: 0;
						margin-top: -30rpx;
					}
					.num-box{
						height: 58rpx;
						line-height: 58rpx;
						font-family: $uni-font-family-Bold;
						font-size: 50rpx;
						color: #171717;
						
						.dw{
							font-size: 24rpx;
							line-height: 70rpx;
							margin-left: 4rpx;
						}
					}
					.info{
						height: 48rpx;
						line-height: 48rpx;
						font-family: $uni-font-family-Medium;
						font-size: 24rpx;
						color: #222;
						
					}
				}
				.item:nth-child(2),
				.item:nth-child(4){
					&::before{
						display: none;
					}
				}
			}
		}
		.box3{
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.10); 
			height: 130rpx;
			padding: 0 30rpx;
			color: #222;
			font-family: $uni-font-family-Bold;
			font-size: 28rpx;
			margin-bottom: 30rpx;
			image{
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>